<template>
  <el-table-column
    :prop="col.prop"
    :label="col.label"
    :width="col.width"
    show-overflow-tooltip
  >
    <template v-if="col.children">
      <my-column
        v-for="(item, index) in col.children"
        :key="index"
        :col="item"
      ></my-column>
    </template>
    <template slot-scope="scoped">
      <div v-if="col.options">
        <span v-if="col.coloumTypeValue == '1'">
        <el-link  type="primary"
          v-for="item in col.options"
          :key="item.value"
          :style="
            item.value == scoped.row[col.prop] ? `color: ${item.color}` : null
          "
        >
        <!-- 超链接 -->
        {{ item.value == scoped.row[col.prop] ? item.label : null }}
      </el-link>
      </span>
      <span class="ButtonTd" v-else-if="col.coloumTypeValue == '2'"
        v-for="item in col.options"
          :key="item.value"
          :style="
            item.value == scoped.row[col.prop] ? `color: ${item.color}` : null
          "
      >
      {{ item.value == scoped.row[col.prop] ? item.label : null }}
         <!-- 按钮 -->
        <!-- <el-tag  type="info"
        v-for="item in col.options"
          :key="item.value"
          :style="
            item.value == scoped.row[col.prop] ? `color: ${item.color}` : null
          "
        >
       
        {{ item.value == scoped.row[col.prop] ? item.label : null }}
      </el-tag> -->
      </span>
      
        <span
          v-else
          v-for="item in col.options"
          :key="item.value"
          :style="
            item.value == scoped.row[col.prop] ? `color: ${item.color}` : null
          "
          >{{ item.value == scoped.row[col.prop] ? item.label : null }}</span
        >
      </div>
      <el-link v-else-if="col.coloumTypeValue == '1'" type="primary">
        <!-- 超链接 -->
        {{
        col.timeFormat
          ? timeChange(scoped.row[col.prop], col.timeFormat)
          : scoped.row[col.prop]
      }}
      </el-link>
      <el-tag v-else-if="col.coloumTypeValue == '2'" type="info">
        {{
        col.timeFormat
          ? timeChange(scoped.row[col.prop], col.timeFormat)
          : scoped.row[col.prop]
      }}
      </el-tag>
      
      <span v-else>
        {{
          col.timeFormat
            ? timeChange(scoped.row[col.prop], col.timeFormat)
            : scoped.row[col.prop]
        }}
      </span>
    </template>
  </el-table-column>
</template>

<script>
export default {
  name: "MyColumn",
  props: {
    col: {
      type: Object,
    },
    options: null,
  },
  methods: {
    timeChange(time, format) {
      if (time) {
        return new Date(time).format(format);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.el-link{
  text-decoration: underline;
  font-size: 13px;
}
.businessTable .el-table__body tr td {
      height: 41px !important;
      padding: 0 auto;
}
.el-tag{
  padding: 0;
  height:16px;
  line-height: 13px;
  background-color: #E5F2FF;
  color: #4AB1FF;
  font-size: 10px;
}
.ButtonTd{
  padding:0;
  height:16px;
  line-height: 13px;
  background-color: #E5F2FF;
  color: #4AB1FF;
  cursor: pointer;
}
</style>
